<template>
    <router-link :to="to">
        <div class="menuButton">
            <span class="menuButton__left">{{title}}</span>
            <span class="menuButton__right"><f-icon name="right" size="16px" color="#ccc"></f-icon></span>
        </div>
    </router-link>
    
</template>

<script>
export default {
    name:"menuButton",
    data(){
        return {
        }
    },
    props:{
        title:String,
        to:String,
    }
}
</script>

<style lang="scss" scoped>
.menuButton {
    background:#fff;
    border-radius:999px;
    color:#3c3c3c;
    height:46px;
    line-height: 46px;
    margin-bottom:10px;
    padding:0 15px;
    display:flex;
    cursor: pointer;

    .menuButton__left {
        font-size:15px;
        font-weight: bold;
        flex:1;
        text-align: left;
    }
    .menuButton__riht {
        font-size:14px;
        width:20px;
    }
}
</style>